<template>
<div>
  <div class="photo-no" v-if="albumList.length==0">
    <div class="no-img"><img src="../../../../../static/images/collection/no-img.png" alt=""></div>
    <p class="photo-no-text">暂无藏品相册</p>
    <div class="photo-no-btn">
      <span @click="addAlbum">立即创建</span>
    </div>
  </div>

  <div class="album-body" v-else>
    <ul class="album-list">
      <li class="album-list-item" v-for="(v,k) in albumList" :style="'backgroundImage: url('+(v.img&&v.img.substr(0,4).toLowerCase() == 'http' ? v.img : resUrl+v.img)+')'">
        <div class="mask"></div>
        <router-link :to="{name:'albumDetail',query:{albumId:v.id}}" style="display: block;height: 100%;position: relative;">
          <h1 class="album-title">{{v.name}}</h1>
          <p class="album-year">{{v.createTime | year}}</p>
        </router-link>
        <span class="album-crumb" @click="albumDropDown(k)"></span>
        <ul class="album-drop-down" v-show="isDropDown&&ulIndex==k">
          <li @click="updateAlbum(v.name,v.id)">修改相册名称</li>
          <li @click="removeAlbum(v.name,v.id)">删除相册</li>
        </ul>
      </li>
    </ul>

    <div class="album-add" @click="addAlbum"></div>
  </div>


</div>
</template>

<script>
  import {ipconfig} from '../../../../assets/js/ipconfig';
  import {getStatusMapByKey,getUser} from '../../../../assets/js/tools';
  import {updatemalbdirectory,deletemalbdirectory,getmalbdirectory,addmalbdirectory} from '../../../../assets/js/getData';
  import { MessageBox } from 'mint-ui';
  export default {
    name: "album",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        isDropDown:false,
        ulIndex:0,
        albumList:[],//相册列表
        userId:null,
      }
    },
    created(){
      let user = getUser;
      this.userId = user.id;
      //获取相册列表
      this.getAlbumList();
    },
    methods:{
      //获取相册列表
      async getAlbumList(){
        let res = await getmalbdirectory();
        if(res.data.reqResult.code > 0){
          this.albumList = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //添加相册列表
      addAlbum(){
        MessageBox.prompt(' ',{
          showInput:true,
          inputType:'text',
          inputPlaceholder:'请输入相册名称',
          inputValidator: (val) => {
            if (val === null) {
              return true;//初始化的值为null，不做处理的话，刚打开MessageBox就会校验出错，影响用户体验
            }
            return !(val.length > 10)
          }, inputErrorMessage: '相册名称不得多于10字'
        }).then(({value}) => {
          addmalbdirectory(value,this.userId).then(res => {
            if(res.data.reqResult.code > 0){
              let albumId = res.data.data.id;
              this.$router.push({name:'selectPhoto',query:{albumId:albumId}});
            }else {
              Toast(res.data.reqResult.msg);
            }
          })
        }).catch(()=>{})
      },
      //修改相册名
      updateAlbum(name,id){
        this.isDropDown = !this.isDropDown;
        MessageBox.prompt(' ',{
          showInput:true,
          inputType:'text',
          inputValue:name,
          inputValidator: (val) => {
            if (val === null) {
              return true;//初始化的值为null，不做处理的话，刚打开MessageBox就会校验出错，影响用户体验
            }
            return !(val.length > 10)
          }, inputErrorMessage: '相册名称不得多于10字'
        }).then(({value}) => {
          updatemalbdirectory(value,id).then(res => {
            if(res.data.reqResult.code > 0){
              this.getAlbumList();
            }else {
              Toast(res.data.reqResult.msg);
            }
          })
        }).catch(()=>{})
      },
      //删除相册
      removeAlbum(name,id){
        this.isDropDown = !this.isDropDown;
        MessageBox.confirm('确定删除('+name+')相册吗？删除后，无法恢复','').then(() => {
          deletemalbdirectory(id).then(res => {
            if(res.data.reqResult.code > 0){
              this.getAlbumList();
            }else {
              Toast(res.data.reqResult.msg);
            }
          })
        }).catch(()=>{})
      },
      //显示操作选项
      albumDropDown(k){
        this.ulIndex = k;
        this.isDropDown = !this.isDropDown;
      }
    }
  }
</script>

<style scoped>
  .photo-no{
    margin-top: 8.45rem;
  }
  .no-img{
    width: 4.4rem;
    margin: 0 auto;
  }
  .no-img img{
    width: 100%;
  }
  .photo-no-text{
    color: #666666;
    font-size: 0.7rem;
    text-align: center;
    line-height: 0.7rem;
    margin-top: 0.75rem;
    margin-bottom: 0.85rem;
  }
  .photo-no-btn{
    text-align: center;
  }
  .photo-no-btn span{
    display: inline-block;
    width: 4.9rem;
    height: 1.35rem;
    line-height: 1.35rem;
    color: #ffffff;
    font-size: 0.7rem;
    background-color: #C50000;
    border-radius: 13px;
  }
  .album-body{
    background-color: #E5E5E5;
    padding: 0.5rem 0 3rem 0;
    min-height: 100vh;
  }
  .album-list{
    width: 92vw;
    margin: 0 auto;
  }
  .album-list-item{
    width: 100%;
    height: 92vw;
    border-radius: 3px;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
    position: relative;
    margin-bottom: 0.5rem;
    background-origin: content-box;
    /*background-position:50% 50%;*/
    background-size:cover;
    background-repeat:no-repeat;
    background-color: rgba(0,0,0,0.2);
  }
  .mask{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
  }
  .album-title{
    width: 67.5%;
    color: #FFFFFF;
    font-size: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    top: 42.6%;
    left: 50%;
    transform: translateX(-50%);
  }
  .album-year{
    color: #FFFFFF;
    font-size: 0.75rem;
    line-height: 0.75rem;
    position: absolute;
    top: 53.3%;
    left: 50%;
    transform: translateX(-50%);
  }
  .album-crumb{
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background: url("../../../../../static/images/collection/crumb.png") no-repeat;
    background-size: 1.125rem 0.75rem;
    background-position: center center;
    position: absolute;
    top: 0.35rem;
    right: 0.55rem;
    z-index: 10;
  }
  .album-drop-down{
    /*display: none;*/
    /*width: 5rem;*/
    background-color: #ffffff;
    padding: 0 0.4rem;
    border-radius: 3px;
    position: absolute;
    top: 2.2rem;
    right: 0.65rem;
    z-index: 10;
  }
  .album-drop-down li{
    color: #666666;
    font-size: 0.65rem;
    height: 2.1rem;
    line-height: 2.1rem;
    text-align: center;
  }
  .album-drop-down li:first-child{
    border-bottom: 1px solid #E5E5E5;
  }
  .album-drop-down:before{
    content: '';
    width: 0;
    height: 0;
    border-left: 0.25rem solid transparent;
    border-right: 0.25rem solid transparent;
    border-bottom: 0.4rem solid #ffffff;
    position: absolute;
    top: -0.4rem;
    right: 0.4125rem;
  }
  .album-add{
    display: block;
    width: 3rem;
    height: 3rem;
    background-image: url("../../../../../static/images/collection/album_add.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: fixed;
    right: 0.8rem;
    bottom: 3.25rem;
  }





















</style>
